<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html class="js" dir="ltr" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><script id="bug.surrogate.http://www.google-analytics.com/ga.js">var urchinTracker=function(){},_gat={_getTracker:function(){return{__noSuchMethod__:function(){},_link:function(o){if(o)location.href=o;},_linkByPost:function(){return true;},_getLinkerUrl:function(o){return o;},_trackEvent:function(){}}}}</script><head>



<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Creating a multi-resolution favicon including transparency with
 the GIMP |  Egressive - superior free and open source software 
solutions built on Linux and Drupal</title>
  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="http://egressive.com/sites/egressive.com/themes/egressive09/favicon.ico" type="image/x-icon">
  <link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/node.css">
<link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/defaults.css">
<link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/system.css">
<link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/system-menus.css">
<link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/user.css">
<link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/content-module.css">
<link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/ctools.css">
<link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/date.css">
<link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/datepicker.css">
<link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/jquery.css">
<link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/filefield.css">
<link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/img_assist.css">
<link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/lightbox.css">
<link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/mollom.css">
<link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/views_slideshow_002.css">
<link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/views_slideshow.css">
<link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/calendar.css">
<link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/farbtastic.css">
<link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/fieldgroup.css">
<link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/views.css">
<link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/ie6nomore.css">
<link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/comment.css">
<link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/printlinks.css">
<link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/tabs.css">
<link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/messages.css">
<link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/block-editing.css">
<link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/wireframes.css">
<link type="text/css" rel="stylesheet" media="all" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/egressive09.css">
<link type="text/css" rel="stylesheet" media="print" href="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/print.css">
<!--[if IE]>
<link type="text/css" rel="stylesheet" media="all" href="/sites/egressive.com/themes/zen/zen/ie.css?z" />
<![endif]-->
  <script src="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/ga.js" async="" type="text/javascript"></script><script type="text/javascript" src="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/jquery_002.js"></script>
<script type="text/javascript" src="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/drupal.js"></script>
<script type="text/javascript" src="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/googleanalytics.js"></script>
<script type="text/javascript" src="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/img_assist.js"></script>
<script type="text/javascript" src="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/lightbox.js"></script>
<script type="text/javascript" src="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/mollom.js"></script>
<script type="text/javascript" src="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/jquery.js"></script>
<script type="text/javascript" src="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/views_slideshow_002.js"></script>
<script type="text/javascript" src="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/views_slideshow.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, { "basePath": "/", "googleanalytics": { "trackOutgoing": 1, "trackMailto": 1, "trackDownload": 1, "trackDownloadExtensions": "7z|aac|arc|arj|asf|asx|avi|bin|csv|doc|exe|flv|gif|gz|gzip|hqx|jar|jpe?g|js|mp(2|3|4|e?g)|mov(ie)?|msi|msp|pdf|phps|png|ppt|qtm?|ra(m|r)?|sea|sit|tar|tgz|torrent|txt|wav|wma|wmv|wpd|xls|xml|z|zip" }, "lightbox2": { "rtl": 0, "file_path": "/(\\w\\w/)system/files", "default_image": "/sites/egressive.com/modules/lightbox2/images/brokenimage.jpg", "border_size": 10, "font_color": "000", "box_color": "fff", "top_position": "", "overlay_opacity": "0.8", "overlay_color": "000", "disable_close_click": 1, "resize_sequence": 0, "resize_speed": 400, "fade_in_speed": 400, "slide_down_speed": 600, "use_alt_layout": 0, "disable_resize": 0, "disable_zoom": 0, "force_show_nav": 0, "show_caption": true, "loop_items": 0, "node_link_text": "View Image Details", "node_link_target": 0, "image_count": "", "video_count": "", "page_count": "", "lite_press_x_close": "press \x3ca href=\"#\" onclick=\"hideLightbox(); return FALSE;\"\x3e\x3ckbd\x3ex\x3c/kbd\x3e\x3c/a\x3e to close", "download_link_text": "", "enable_login": false, "enable_contact": false, "keys_close": "c x 27", "keys_previous": "p 37", "keys_next": "n 39", "keys_zoom": "z", "keys_play_pause": "32", "display_image_size": "", "image_node_sizes": "()", "trigger_lightbox_classes": "", "trigger_lightbox_group_classes": "", "trigger_slideshow_classes": "", "trigger_lightframe_classes": "", "trigger_lightframe_group_classes": "", "custom_class_handler": 0, "custom_trigger_classes": "", "disable_for_gallery_lists": true, "disable_for_acidfree_gallery_lists": true, "enable_acidfree_videos": true, "slideshow_interval": 5000, "slideshow_automatic_start": true, "slideshow_automatic_exit": true, "show_play_pause": true, "pause_on_next_click": false, "pause_on_previous_click": true, "loop_slides": false, "iframe_width": 600, "iframe_height": 400, "iframe_border": 1, "enable_video": 0 } });
//--><!]]>
</script>
  <meta name="google-site-verification" content="P2IzPiCMM6SiAhXNhyqMaJ3JVGvPB2TgFUF5esdVnOA">
  <meta name="generator" content="Drupal http://drupal.org">
</head><body class="not-front not-logged-in node-type-tutorial one-sidebar sidebar-left page-tutorial-creating-a-multi-resolution-favicon-including-transparency-with-the-gimp section-tutorial lightbox-processed">

  <div id="page"><div id="page-inner">

    <a name="top" id="navigation-top"></a>
          <div id="skip-to-nav"><a href="#navigation">Skip to Navigation</a></div>
    
<!-- Header Area Starts -->
    <div id="header"><div id="header-inner" class="clear-block">


              <div id="logo-title">

<!-- Logo Starts -->
          <!-- Logo Ends -->

<!-- Site Name Starts -->
          
              <div id="site-name">
                <h1>
                    <a href="http://egressive.com/" title="Home" rel="home">
                       Egressive - superior free and open source 
software solutions built on Linux and Drupal                    </a>
                </h1>
              </div>
          <!-- Site Name Ends -->

<!-- Site Slogan Starts -->
          <!-- Site Slogan Ends -->

        </div>
      
<!-- Header Blocks Start -->
      <!-- Header Blocks Ends -->

    </div>
  </div>
<!-- Header Area Ends -->
  <div id="main">
    <div id="main-inner" class="clear-block with-navbar">

<!-- Nav Bar Starts -->
              <div id="navbar">
          <div id="navbar-inner" class="clear-block region region-navbar">
            <a name="navigation" id="navigation"></a>
               <div class="breadcrumb"><a href="http://egressive.com/">Home</a> › Creating a multi-resolution favicon including transparency with the GIMP</div>            <div id="block-search-0" class="block block-search region-odd even region-count-1 count-2"><div class="block-inner">

  
  <div class="content">
    <form action="/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp" accept-charset="UTF-8" method="post" id="search-block-form">
<div><div id="search_form">
  <!--<label for="search_block_form">Custom Search</label>-->
  <div class="form-text-container"><input name="search_block_form" id="edit-search-theme-form-l" title="Enter the terms you wish to search for." class="form-text" type="text"></div>
  <div class="form-submit-btn"><input name="op" value="Search" class="form-submit" type="submit"></div>
  <input name="form_id" id="edit-search-block-form" value="search_block_form" type="hidden">
  <input name="form_token" id="a-unique-id" value="83639ac5252ea58325b50a866c87e580" type="hidden">
  <div class="clear">&nbsp;</div>
</div>


</div></form>
  </div>

  
</div></div> <!-- /block-inner, /block -->
<div id="block-print-0" class="block block-print region-even odd region-count-2 count-3"><div class="block-inner">

  
  <div class="content">
    <span class="print_html"><a href="http://egressive.com/print/125" title="Display a printer-friendly version of this page." class="print-page" rel="nofollow"><img src="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/print_icon.gif" alt="Printer-friendly version" title="Printer-friendly version" class="print-icon" height="16" width="16"></a></span>  </div>

  
</div></div> <!-- /block-inner, /block -->
          </div>
        </div>
      <!-- Nav Bar Ends -->


          <div id="content"><div id="content-inner">

        
                  <div id="content-header">
                          <h2 class="title">Creating a multi-resolution favicon including transparency with the GIMP</h2>
                                                          </div> <!-- /#content-header -->
        
        
        <div id="content-area">
          <div id="node-125" class="node node-type-tutorial"><div class="node-inner">

  
  
      <div class="meta">
              <div class="submitted">
         <div class="picture">
  <a href="http://egressive.com/user/dave" title="View user profile."><img src="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/picture-3.png" alt="dave's picture" title="View user profile." class="imagecache imagecache-people_small" height="103" width="75"></a></div>
 Submitted by <a href="http://egressive.com/user/dave" title="View user profile.">dave</a> on 9. August 2008 - 13:44        </div>
      
              <div class="terms terms-inline"> in <ul class="links inline"><li class="taxonomy_term_1 first last"><a href="http://egressive.com/category/services/drupal-development" rel="tag" title="">Drupal Development</a></li>
</ul></div>
          </div>
  
  <div class="content">
    <p>This morning, I decided to create a <em>proper</em> favicon, namely a multi-resolution favicon with transparency.  For those who don't know what <a href="http://en.wikipedia.org/wiki/Favicon">Favicons</a>
 are, they're little graphical icons which represent specific websites, 
that are particularly useful for distinguishing between tabs in modern 
tabbed web browsers (like <a href="http://www.opera.com/">Opera</a>, <a href="http://mozilla.com/">Firefox</a>, <a href="http://www.konqueror.org/">Konqueror</a>, and <a href="http://www.apple.com/safari/">Safari</a>...  and much more recently, Microsoft's laggard Internet Explorer 7.0) and other <a href="http://en.wikipedia.org/wiki/Tabbed_document_interface">tabbed document interfaces</a>.  They have a further application: recent developments on the web like Mozilla's (open source) <a href="http://en.wikipedia.org/wiki/Mozilla_Prism">Prism</a> project and Adobe's (proprietary) <a href="http://www.adobe.com/products/air/">Air</a>
 allow you to turn web applications into something that behaves more 
like a desktop application. These require icons for new contexts like 
application launchers, menu bars, toolbars, and on the desktop.</p>
<p><span class="imageRight"><span class="caption"><span class="inline inline-right"><img src="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/favicon_fullsize_logo_0.png" alt="" title="" class="image image-_original " height="273" width="250"></span></span></span>Most
 favicons are created only for the web browser context, which by default
 is 16x16 pixels. This is fine in that context, but increasingly, 
favicons are being used in other contexts as well, usually larger. Low 
resolution 16x16 favicons look ghastly and pixelated when enlarged to 
sizes like 32x32, 64x64, or 128x128 pixels for other contexts, like the 
application icons for application launcher bars and application 
toolbars.</p>
<p>Although most <a href="http://www.w3.org/">Web Standards</a> 
compliant browsers can deal with favicons in a variety of formats like 
GIF, JPG or the more suitable PNG formats, the Microsoft Windows Icon 
format (.ico) is the lowest common denominator for favicons, in that 
they're recognised by MS's Internet Explorer 6.0 and later versions (as 
well as Opera, Firefox, Konqueror, Safari, etc.). ICO files have the 
additional property that they (somewhat non-intuitively) can contain 
multiple images within one file, namely multiple versions of the same 
icon, but at different colour depths and pixel resolutions.</p>
<p>To provide the maximum favicon compatibility and utility, this 
morning I wanted to work out how to create a multi-resolution 
favicon.ico file, preferably with proper full alpha transparency (which 
allows variable transparency, allowing icons without coloured 
backgrounds to look smooth and professional on any background over which
 they might be superimposed).</p>
<p><span class="imageRight"><span class="caption"><span class="inline inline-right"><img src="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/favicon_layer_view-cropped.png" alt="" title="" class="image image-_original " height="237" width="238"></span></span></span>On
 principle, I like to achieve my computing ends using only open source 
software. A quick Google search indicated that I could create .ico files
 with the excellent free image manipulation package, <a href="http://gimp.org/">The GIMP</a>
 (available for Linux, other X11 platforms, MS Windows, and Mac OS X - 
it can even work with most files produced by Adobe's heavily proprietary
 Photoshop). Unsurprisingly, I run it happily on Linux (in fact, I first
 used the GIMP on Linux in 1996, about 8 years before it was available 
for Windows or OS X...), and encourage you to try it on whatever 
computing platform you use most often.</p>
<p>Here's how I did it:</p>
<ul>
<li>Fire up <a href="http://gimp.org/">The GIMP</a> on your machine.  Download it for free if you don't already have it.  The GIMP, and its open source counterpart <a href="http://inkscape.org/">Inkscape</a>
 make great replacements for the heavyweight (and very costly) Adobe 
Photoshop and Illustrator suite for raster and vector graphics 
respectively...</li>
<li>Do whatever you have to to load up a large version of the brand or 
logo you want to make into a favicon. I recommend that it be at least 
128 by 128 pixels in size.</li>
<li>Copy the image (to avoid inadvertently saving over your actual logo image!) - I used File-&gt;Save As... to achieve this.</li>
<li>Make your logo a square image, i.e. with the same pixel width and 
height. The easiest way to do this is to use the right-click menu over 
the image itself - go to Image-&gt;Canvas Size... Go to the part of the 
window where you can set the canvas dimensions, and click on the chain 
links. This allows you to specify the width and the height for the image
 independently - I recommend making the small of the two dimensions 
equal to the larger (you might want to centre the resulting image by 
dragging with your mouse). Or, if your logo image allows it, you can use
 the Cropping tool to crop the image into a square shape so long as you 
don't lose anything important (e.g. part of the logo, drop shadows, 
etc.). Don't be too precious about it, and consider how well aspects of 
your logo will come across when they're tiny. For instance, if your logo
 includes text... I'd suggest you lose it. It'll be a little illegible 
blob at 16x16 pixels. </li>
<li><span class="imageRight"><span class="caption"><span class="inline inline-right"><img src="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/favicon_save_as_ms_icon_dialog_0.png" alt="" title="" class="image image-_original " height="79" width="300"></span></span></span>Once
 you've got a square logo, you can create reduced size versions of it. 
The standard sizes for icons are 128x128, 64x64, 48x48, 32x32, and 16x16
 pixels. Flatten your image (if it has layers) and then save it into 
each of these sizes in turn. To do so: 
<ul>
<li>Right click over the image, select Image-&gt;Scale Image...</li>
<li>Put in the width of the image, e.g. 128. If you then hit TAB or 
click in the height field, you'll see that it will automatically jump to
 the same dimension. That's because, by default, The GIMP scales image 
dimensions in proportion to the original image size so that the image 
content doesn't get distorted (i.e. look too fat or to thin) in the 
process of scaling the image - that's what the little "chain" icon to 
the right of the image dimensions indicates.</li>
<li>Click "Scale" to scale the image.</li>
<li><span class="imageRight"><span><span class="inline inline-right"><img src="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/favicon_save_as_bpp_0.png" alt="" title="" class="image image-_original " height="279" width="250"></span></span></span>Save
 your image (File-&gt;Save As) as, e.g. favicon64.png (if it's the 64x64
 version) or favicon16.png, etc. By providing the .png file suffix, The 
GIMP will automatically save it in PNG<a href="http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp">*</a> format.  It's probably most convenient to put these files into the same directory as the original logo image...</li>
<li>The GIMP will give you various PNG saving options - it's safe to hit "OK", i.e. select the defaults, for all of them.</li>
<li>Now that the reduced icon image is saved, hit CTRL-Z to undo the 
resize - you should be looking at the full-size logo image again - and 
repeat the process for another icon size.</li>
</ul>
</li>
<li>Once you have created the full gamut of icon file sizes, you can 
create the .ico image. Open the largest of the icon images in The GIMP. 
Right-click on the image and select File-&gt;Open as Layers... and 
select all the other icon images.</li>
<li>This will create a single image with a layer containing each of the other icon images.</li>
<li>Save the image as a Microsoft Windows Icon (.ico) image - 
File-&gt;Save As..., and then type in the filename, e.g. favicon.ico. 
(this will automatically select the .ico format)</li>
<li>Upon saving the .ico image, you can specify the bits-per-pixel (bpp)
 for each layer independently. I just left mine at the defaults.</li>
<li>You're done - now copy the favicon.ico to your webserver, and ensure
 that it's in the right place (by default, IE 6.0 looks for /favicon.ico
 in your top level webserver directory). Give it a try! Note - if you 
already had a favicon of some sort for the site, it might already be 
cached by your browser, and as such might take a while to be visible. 
Try restarting your browser, or, better yet if you're using a crappy 
browser like Microsoft's Internet Explorer 6 or 7... download and 
install Firefox - the favicon won't be cached in that browser yet!<span class="imageRight"><span class="caption"></span></span></li>
</ul>
<p><span class="inline inline-right"><img src="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/favicon_image_with_all_layers.png" alt="" title="" class="image image-_original " height="340" width="380"></span>The
 result is a .ico file with multiple versions of your logo at different 
resolutions. Now, depending on the context, visitors to your site will 
see your nice favicon in their browser tabs, superimposed on whatever 
browser chrome they're using in all of its transparent glory. Similarly,
 if they use Adobe Air or Prism to create an icon for your site on their
 desktop, or want to save your site on their iPhones, they should get 
the appropriately sized full-resolution icon for their launch menu, or 
desktop! One point to note: there's no reason that the logo needs to be 
the same at each resolution. I suppose you could add a bit of text, e.g.
 a company name, etc. for the higher resolution versions of the logo, 
but you'd have to test things to make sure it's readable at the relevant
 resolutions.<span class="imageRight"><br> <span class="caption"><span class="inline inline-left"><img src="creating-a-multi-resolution-favicon-including-transparency-with-the-gimp_files/favicon_prism_desktop_icon.png" alt="" title="" class="image image-_original " height="163" width="357"></span><br></span></span></p>
<p><a title="PNG-note" name="PNG-note"></a>*Choose your file format 
wisely. TIFs (often used by Mac people) are a good image format for 
high-fidelity photo work, but totally inappropriate for the web, because
 they are bulky (lots of bytes) and tend not to be supported by most 
browsers. JPGs are an option, but if your logo is a line drawing or a 
computer-generated image (as most logos are), they tend to provide a 
poor reproduction due to their "lossy compression algorithms" (don't ask
 - beyond the scope of this article) particularly at small sizes - plus 
JPG doesn't support transparency at all. GIF images offer only 1 bit 
alpha transparency (on or off) which leads to icons with jagged edges 
that tend to blend with their backgrounds like oil does with water (i.e.
 not). The <a href="http://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG format</a>
 supports 8 to 32 bit transparency, allowing for those smooth feathered 
edges that look much better to even the untrained eye, so that's the 
best starting point. It's specifically designed for the web, but 
unfortunately, Microsoft didn't have the foresight to implement support 
for PNG's graphical capabilities in IE 6. Luckily, IE6 is slowly dying 
out on the Web (as people move to better browsers like <a href="http://getfirefox.com/">Firefox</a>).</p><div class="image-clear"></div>  </div>

  <ul class="links inline"><li class="comment_add first last"><a href="http://egressive.com/comment/reply/125#comment-form" title="Share your thoughts and opinions related to this posting.">Add new comment</a></li>
</ul>
</div></div> <!-- /node-inner, /node -->
  <div id="comments">
          <h2 id="comments-title">Comments</h2>
        <a id="comment-67"></a>
<div class="comment comment-published odd first comment-by-anon"><div class="comment-inner clear-block">

      <h3 class="title">
      <a href="http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp#comment-67" class="active">Great job!</a>          </h3>
  
  
  
  <div class="submitted">
    Submitted by Anonymous on 23. January 2011 - 0:13.  </div>

  <div class="content">
    <p>I really appreciate this tutorial. Thank you.<br>
Texhead</p>
      </div>

      <div class="links">
      <ul class="links"><li class="comment_reply first last"><a href="http://egressive.com/comment/reply/125/67">reply</a></li>
</ul>    </div>
  
</div></div> <!-- /comment-inner, /comment -->
<a id="comment-53"></a>
<div class="comment comment-published even comment-by-anon"><div class="comment-inner clear-block">

      <h3 class="title">
      <a href="http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp#comment-53" class="active">Thanks alot!!!!</a>          </h3>
  
  
  
  <div class="submitted">
    Submitted by Anonymous on 4. December 2010 - 12:01.  </div>

  <div class="content">
    <p>This is good info thanks alot!!!!!!!</p>
      </div>

      <div class="links">
      <ul class="links"><li class="comment_reply first last"><a href="http://egressive.com/comment/reply/125/53">reply</a></li>
</ul>    </div>
  
</div></div> <!-- /comment-inner, /comment -->
<a id="comment-47"></a>
<div class="comment comment-published odd comment-by-anon"><div class="comment-inner clear-block">

      <h3 class="title">
      <a href="http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp#comment-47" class="active">Great Tutorial!</a>          </h3>
  
  
  
  <div class="submitted">
    Submitted by Anonymous on 18. November 2010 - 8:18.  </div>

  <div class="content">
    <p>&nbsp;This told me everything I needed to know to create a favicon for my intranet website, and did it using free tools.&nbsp;<br>
&nbsp;<br>
Thank you very much.&nbsp;<br>
&nbsp;<br>
&nbsp;</p>
      </div>

      <div class="links">
      <ul class="links"><li class="comment_reply first last"><a href="http://egressive.com/comment/reply/125/47">reply</a></li>
</ul>    </div>
  
</div></div> <!-- /comment-inner, /comment -->
<a id="comment-46"></a>
<div class="comment comment-published even comment-by-anon"><div class="comment-inner clear-block">

      <h3 class="title">
      <a href="http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp#comment-46" class="active">Thanks for this favicon tutorial on gimp</a>          </h3>
  
  
  
  <div class="submitted">
    Submitted by Anonymous on 18. November 2010 - 4:30.  </div>

  <div class="content">
    <p>This is a great work! Easy and complete!</p>
      </div>

      <div class="links">
      <ul class="links"><li class="comment_reply first last"><a href="http://egressive.com/comment/reply/125/46">reply</a></li>
</ul>    </div>
  
</div></div> <!-- /comment-inner, /comment -->
<a id="comment-40"></a>
<div class="comment comment-published odd comment-by-anon"><div class="comment-inner clear-block">

      <h3 class="title">
      <a href="http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp#comment-40" class="active">Fine points.</a>          </h3>
  
  
  
  <div class="submitted">
    Submitted by Anonymous on 1. November 2010 - 22:33.  </div>

  <div class="content">
    <p>When it comes to scaling the image make sure you use 
Image&gt;Scale rather than the Scale tool in the Toolbox. The former 
automatically keeps the changed images centred which saves a lot of 
fiddling.<br>
Once you have resized one side of your source image to 128px you also 
need to reset canvas size to 128x128 and then expand "Image to fit 
Canvas".<br>
If you do this the above process works perfectly.<br>
&nbsp;</p>
      </div>

      <div class="links">
      <ul class="links"><li class="comment_reply first last"><a href="http://egressive.com/comment/reply/125/40">reply</a></li>
</ul>    </div>
  
</div></div> <!-- /comment-inner, /comment -->
<a id="comment-32"></a>
<div class="comment comment-published even comment-by-anon"><div class="comment-inner clear-block">

      <h3 class="title">
      <a href="http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp#comment-32" class="active">gimp favicon</a>          </h3>
  
  
  
  <div class="submitted">
    Submitted by Anonymous on 21. September 2010 - 16:10.  </div>

  <div class="content">
    <p>thx 4 this tutor .. work great but before i must insert this 
string &nbsp;&lt;link rel="icon" href="favicon.ico" 
type="image/vnd.microsoft.icon"&gt;<br>
&nbsp;<br>
then it works perfectly.. thx again and grezz</p>
      </div>

      <div class="links">
      <ul class="links"><li class="comment_reply first last"><a href="http://egressive.com/comment/reply/125/32">reply</a></li>
</ul>    </div>
  
</div></div> <!-- /comment-inner, /comment -->
<a id="comment-29"></a>
<div class="comment comment-published odd comment-by-anon"><div class="comment-inner clear-block">

      <h3 class="title">
      <a href="http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp#comment-29" class="active">I have been a long time fan</a>          </h3>
  
  
  
  <div class="submitted">
    Submitted by Anonymous on 5. September 2010 - 7:13.  </div>

  <div class="content">
    <p>I have been a long time fan of the gimp, I knew it had the 
capability of creating icons, but was unaware of multi-resolution icons.<br>
Great Article thanks!</p>
      </div>

      <div class="links">
      <ul class="links"><li class="comment_reply first last"><a href="http://egressive.com/comment/reply/125/29">reply</a></li>
</ul>    </div>
  
</div></div> <!-- /comment-inner, /comment -->
<a id="comment-26"></a>
<div class="comment comment-published even comment-by-anon"><div class="comment-inner clear-block">

      <h3 class="title">
      <a href="http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp#comment-26" class="active">Great Article!</a>          </h3>
  
  
  
  <div class="submitted">
    Submitted by Anonymous on 2. September 2010 - 5:03.  </div>

  <div class="content">
    <p>This has got to be one of the most intuitive articles on the 
subject I've seen. Great job! And, I can always use some free software!</p>
      </div>

      <div class="links">
      <ul class="links"><li class="comment_reply first last"><a href="http://egressive.com/comment/reply/125/26">reply</a></li>
</ul>    </div>
  
</div></div> <!-- /comment-inner, /comment -->
<a id="comment-25"></a>
<div class="comment comment-published odd comment-by-anon"><div class="comment-inner clear-block">

      <h3 class="title">
      <a href="http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp#comment-25" class="active">multi resolution favicon making</a>          </h3>
  
  
  
  <div class="submitted">
    Submitted by Anonymous on 1. September 2010 - 11:23.  </div>

  <div class="content">
    <p>thanks. favicon making.&nbsp;</p>
      </div>

      <div class="links">
      <ul class="links"><li class="comment_reply first last"><a href="http://egressive.com/comment/reply/125/25">reply</a></li>
</ul>    </div>
  
</div></div> <!-- /comment-inner, /comment -->
<a id="comment-24"></a>
<div class="comment comment-published even comment-by-anon"><div class="comment-inner clear-block">

      <h3 class="title">
      <a href="http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp#comment-24" class="active">Browser Cache</a>          </h3>
  
  
  
  <div class="submitted">
    Submitted by Anonymous on 28. August 2010 - 9:04.  </div>

  <div class="content">
    <p>In Firefox and Chrome, hitting Ctrl + Shift + R or clicking 
refresh while holding down shift should clear the cache for that page. I
 don't know about the other ones.</p>
      </div>

      <div class="links">
      <ul class="links"><li class="comment_reply first last"><a href="http://egressive.com/comment/reply/125/24">reply</a></li>
</ul>    </div>
  
</div></div> <!-- /comment-inner, /comment -->
<a id="comment-20"></a>
<div class="comment comment-published odd last comment-by-anon"><div class="comment-inner clear-block">

      <h3 class="title">
      <a href="http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp#comment-20" class="active">Creating a multi-resolution favicon including transparency with </a>          </h3>
  
  
  
  <div class="submitted">
    Submitted by Anonymous on 11. August 2010 - 22:03.  </div>

  <div class="content">
    <p>Hey buddy it really works. earlier we use to create individual 
icon in photo shop but this is really good, but a small problem occurs 
when it comes to the 16 by 16 pix icon it appears to be very blur. Is 
there any way whereby we can fix that?<br>
&nbsp;</p>
      </div>

      <div class="links">
      <ul class="links"><li class="comment_reply first last"><a href="http://egressive.com/comment/reply/125/20">reply</a></li>
</ul>    </div>
  
</div></div> <!-- /comment-inner, /comment -->
  </div>
      
          
          
          
            <div class="clear">&nbsp;</div>
            
       </div>

        
        
      </div>
    </div>

              <div id="sidebar-left"><div id="sidebar-left-inner" class="region region-left">
          <div id="block-user-1" class="block block-user region-odd odd region-count-1 count-1"><div class="block-inner">

  
  <div class="content">
    <ul class="menu"><li class="leaf first"><a href="http://egressive.com/" title="">Home</a></li>
<li class="collapsed"><a href="http://egressive.com/about-us" title="About Us">About Us</a></li>
<li class="collapsed"><a href="http://egressive.com/services" title="Services">Services</a></li>
<li class="leaf"><a href="http://egressive.com/portfolio" title="Portfolio">Portfolio</a></li>
<li class="collapsed"><a href="http://egressive.com/resources" title="Resources">Resources</a></li>
<li class="leaf last"><a href="http://egressive.com/contact" title="">Contact Us</a></li>
</ul>  </div>

  
</div></div> <!-- /block-inner, /block -->
        </div></div> <!-- /#sidebar-left-inner, /#sidebar-left -->
      
              <div class="clear">&nbsp;</div>

    </div>
   </div> <!-- /#main-inner, /#main -->

          <div id="footer"><div id="footer-inner" class="region region-footer">

                  <div id="footer-message"><div id="copyright">Copyright © 1998-2010  Egressive Limited</div><div id="site-credit">Built by <a href="http://egressive.com/" title="Egressive web application development experts">Egressive</a> with <a href="http://egressive.com/free-software">free software</a>. Valid <a href="http://validator.w3.org/check/referer">XHTML</a>, <a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3">CSS</a>. Powered by <a href="http://egressive.com/about_drupal">Drupal</a>.</div></div>
        
                
      </div>
  </div> <!-- /#footer-inner, /#footer -->
    
  </div></div> <!-- /#page-inner, /#page -->

  
  <script type="text/javascript">
<!--//--><![CDATA[//><!--
var _gaq = _gaq || [];_gaq.push(["_setAccount", "UA-257339-14"]);_gaq.push(["_trackPageview"]);(function() {var ga = document.createElement("script");ga.type = "text/javascript";ga.async = true;ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(ga, s);})();
//--><!]]>
</script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, { "CToolsAJAX": { "scripts": { "/sites/egressive.com/modules/jquery_update/replace/jquery.min.js?z": true, "/misc/drupal.js?z": true, "/sites/egressive.com/modules/google_analytics/googleanalytics.js?z": true, "/sites/egressive.com/modules/img_assist/img_assist.js?z": true, "/sites/egressive.com/modules/lightbox2/js/lightbox.js?z": true, "/sites/egressive.com/modules/mollom/mollom.js?z": true, "/sites/egressive.com/modules/views_slideshow/js/jquery.cycle.all.min.js?z": true, "/sites/egressive.com/modules/views_slideshow/contrib/views_slideshow_singleframe/views_slideshow.js?z": true, "/sites/egressive.com/modules/views_slideshow/contrib/views_slideshow_thumbnailhover/views_slideshow.js?z": true }, "css": { "/modules/node/node.css?z": true, "/modules/system/defaults.css?z": true, "/modules/system/system.css?z": true, "/modules/system/system-menus.css?z": true, "/modules/user/user.css?z": true, "/sites/egressive.com/modules/cck/theme/content-module.css?z": true, "/sites/egressive.com/modules/ctools/css/ctools.css?z": true, "/sites/egressive.com/modules/date/date.css?z": true, "/sites/egressive.com/modules/date/date_popup/themes/datepicker.css?z": true, "/sites/egressive.com/modules/date/date_popup/themes/jquery.timeentry.css?z": true, "/sites/egressive.com/modules/filefield/filefield.css?z": true, "/sites/egressive.com/modules/img_assist/img_assist.css?z": true, "/sites/egressive.com/modules/lightbox2/css/lightbox.css?z": true, "/sites/egressive.com/modules/mollom/mollom.css?z": true, "/sites/egressive.com/modules/views_slideshow/contrib/views_slideshow_singleframe/views_slideshow.css?z": true, "/sites/egressive.com/modules/views_slideshow/contrib/views_slideshow_thumbnailhover/views_slideshow.css?z": true, "/sites/egressive.com/modules/calendar/calendar.css?z": true, "/misc/farbtastic/farbtastic.css?z": true, "/sites/egressive.com/modules/cck/modules/fieldgroup/fieldgroup.css?z": true, "/sites/egressive.com/modules/views/css/views.css?z": true, "/sites/egressive.com/modules/ie6nomore/ie6nomore.css?z": true, "/modules/comment/comment.css?z": true, "/sites/egressive.com/modules/print/css/printlinks.css?z": true, "/sites/egressive.com/themes/zen/zen/tabs.css?z": true, "/sites/egressive.com/themes/zen/zen/messages.css?z": true, "/sites/egressive.com/themes/zen/zen/block-editing.css?z": true, "/sites/egressive.com/themes/zen/zen/wireframes.css?z": true, "/sites/egressive.com/themes/egressive09/egressive09.css?z": true, "/sites/egressive.com/themes/egressive09/print.css?z": true } } });
//--><!]]>
</script>

<div id="lightbox2-overlay" style="display: none;"></div>      <div id="lightbox" style="display: none;" class="lightbox2-orig-layout">        <div style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);" id="outerImageContainer"><div id="modalContainer" style="display: none; padding: 10px;"></div><div id="frameContainer" style="display: none; padding: 10px;"></div><div id="imageContainer" style="display: none; padding: 10px;"><img id="lightboxImage" alt=""><div id="hoverNav"><a style="padding-top: 10px;" id="prevLink" title="Previous" href="#"></a><a style="padding-top: 10px;" id="nextLink" title="Next" href="#"></a></div></div><div id="loading"><a href="#" id="loadingLink"></a></div></div>        <div style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);" id="imageDataContainer" class="clearfix">          <div id="imageData"><div id="imageDetails"><span id="caption"></span><span id="numberDisplay"></span></div><div id="bottomNav"><div id="frameHoverNav"><a style="padding-top: 10px;" id="framePrevLink" title="Previous" href="#"></a><a style="padding-top: 10px;" id="frameNextLink" title="Next" href="#"></a></div><a style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);" id="bottomNavClose" title="Close" href="#"></a><a id="bottomNavZoom" href="#"></a><a id="bottomNavZoomOut" href="#"></a><a id="lightshowPause" title="Pause Slideshow" href="#" style="display: none;"></a><a id="lightshowPlay" title="Play Slideshow" href="#" style="display: none;"></a></div></div>        </div>      </div></body></html>